<template>
  <div class="order">
    <el-card>
      <!-- 搜索组件 -->
      <search-form :items="formItems" :params="condition" :on-submit="onSearch" :btn-loading="loading" />

      <!-- 左上角按钮 -->
      <el-button size="mini" type="primary" @click="daochu">
        <i class="el-icon-s-promotion"></i>
        导出
      </el-button>

      <!-- 表格区域 -->
      <div class="table-body">
        <el-table ref="listData" style="margin-top: 10px" :data="listData" v-loading="loading">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="mobile" label="用户" />
          <!-- <el-table-column prop="appletsType" label="用户来源" /> -->
          <el-table-column prop="roles" label="用户角色">
            <template slot-scope="scope">
              <div v-if="scope.row.roles.length">
                <el-tag type="success" v-for="(item,index) in scope.row.roles" :key="index">{{item.name}}</el-tag>
              </div>
              <p v-else>--</p>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" />
          <el-table-column prop="address" label="操作" width="200">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="guanlian(scope.row)">关联角色</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="page_box" v-show="total>0">
        <pagination
          :page.sync="condition.current"
          :limit.sync="condition.size"
          @pagination="getList"
          :total="total"
          />
      </div>

      <!-- 编辑或新增 -->
      <el-dialog
        v-if="dialog"
        :title="mdl.id ? '编辑关联角色' : '关联角色'"
        :visible.sync="dialog"
        width="500px"
        :close-on-click-modal="false"
        destroy-on-close
      >
        <form-user :mdl="mdl" :parent-id="parentId" :handle-close-drawer="handleCloseDialog" @getList="getList" />
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import SearchForm from '@/components/SearchForm'
import { getAppletsUserPage } from '@/api/user'
import FormUser from './FormUser.vue'
export default {
  components: { SearchForm,FormUser },
  data() {
    return {
      loading: false,
      listData: [],
      mdl: {},
      parentId: 0,
      dialog: false, // 新增、编辑弹框
      query:{
        roomId:'',
        storeId:'',
      },
      total:0,
      condition: {
        current: 1,
        size: 10,
        mobile:''
      },
    }
  },
  computed: {
    formItems() {
      // 构建搜索表单
      return [
        { title: '输入手机号', type: 'input', key:'mobile', maxlength: 11 },
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {

    // 导出
    daochu(){
      window.open(`https://getewayentry.yingxuzdqp.com/rich-sparrow-god/sysRole/appletsUserExport?mobile=${this.condition.mobile}&current=${this.condition.current}&size=${this.condition.size}`);
    },

    // 获取列表
    getList() {
      this.loading = true
      getAppletsUserPage(this.condition).then(res => {
        if (res.statusCode === '00000') {
          this.listData = res.data.records
          this.total = res.data.total
          this.loading = false
        }
      })
    },

    // 搜索按钮
    onSearch() {
      this.getList()
    },

    // 关联角色
    guanlian(e) {
      console.log(e)
      this.dialog = true
      this.mdl = {
        userId: e.id
      }
    },

    // 修改-弹窗
    editPop(item) {
      console.log(item)
      this.mdl = Object.assign({}, item)
      this.dialog = true
    },

    // 关闭dialog方法
    handleCloseDialog() {
      this.dialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
.order {
  margin: 20px;
}
</style>
